<template>
  <div>
    <ProTable
      ref="proTable"
      highlight-current-row
      :columns="columns"
      :request-api="getPendingTicketListApi"
      :pagination="false"
      :indent="20"
      :tool-button="false"
      :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
      :data-callback="dataCallback"
    >
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPendingTicketListApi } from "@/api/modules/ticket/pending";

// 表格配置项
const proTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
  { prop: "business_name", label: "告警源", align: "left", minWidth: 120 },
  { prop: "name", label: "系统名称", align: "left", minWidth: 150 },
  { prop: "priority", label: "当月告警数", align: "right", width: 140 }
]);

const dataCallback = (data: any) => {
  return data.results;
};
</script>

<style scoped lang="scss">
:deep(.table-main) {
  padding: 16px 0 0 !important;
}

// .table-main {
//   padding: 16px 0 0 !important;
// }
</style>
